<template>
	<default-header-page-layout ref="page" title="切割上线" >
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<!-- step 1 start -->
				<template v-if="step===1">
					<scan-input-form-item
						class="forma-item"
						label="物料编码"
						v-model="forma.material"
						:msg="msg.material"
						:msg-type="msgType.material"
						@search="onSearchMaterial"
						@clear="onClearMaterial"
					/>
					<view class="material-item-group" v-if="list.length>0">
						<view class="material-list-item" v-for="(item,index) in list" :key="'material-list-item-'+index">
							<view class="close-btn" @tap.stop="onDelList(index)">
								<view class="icon-layer"><u-icon name="close" color="#ffffff" size="24" /></view>
							</view>
							<view class="badge-box"><u-badge :value="index+1" bg-color="#F18201" /></view>
							<view class="item-row">
								<view class="label">密度：</view>
								<view class="content auto-wrap">{{item.density}}</view>
							</view>
							<view class="item-row">
								<view class="label">批次：</view>
								<view class="content auto-wrap">{{item.batch}}</view>
							</view>
							<view class="item-row">
								<view class="label">段数：</view>
								<view class="content auto-wrap">{{item.quantity}}</view>
							</view>
						</view>
					</view>
				</template>
				<!-- step 1 end -->
				<!-- step 2 start -->
				<template v-if="step===2">
					<easy-select-form-item
						v-if="stepTwoType==='select'"
						class="forma-item"
						label="产线/工位"
						:list="selectList.stations"
						v-model="formb.stationCode"
						:msg="msg.stationCode"
						:msg-type="msgType.stationCode"
						value-field="stationCode"
						label-field="stationName"
						@clear="onClearStation"
					/>
					<scan-input-form-item
						v-else
						class="forma-item"
						label="产线/工位"
						v-model="formb.stationCode"
						:msg="msg.stationCode"
						:msg-type="msgType.stationCode"
						:has-search="false"
						@clear="onClearStation"
					/>
					<view style="padding:0 16rpx;">
						<u-button type="primary" v-if="stepTwoType==='select'" text="扫码输入产线" @click="onChangeStepTwoType('input')"></u-button>
						<u-button type="primary" v-else text="手动选择产线" @click="onChangeStepTwoType('select')"></u-button>
					</view>
				</template>
				<!-- step 2 end -->
			</view>
			
		</view>
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<template v-if="step===1">
					<div class="btn-frame left-btn-frame"><u-button text="重 置" @click="onReset"></u-button></div>
					<div class="btn-frame right-btn-frame"><u-button type="primary" text="上 线" :disabled="list.length<=0" @click="onNext"></u-button></div>
				</template>
				<template v-else>
					<div class="btn-frame left-btn-frame"><u-button text="上一步" @click="onPrevStep"></u-button></div>
					<div class="btn-frame right-btn-frame"><u-button type="primary" text="提 交" @click="onSubmit"></u-button></div>
				</template>
			</view>
		</template>
	</default-header-page-layout>
</template>

<script>
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
import ActionUserRow from '@/components/ActionUserRow.vue'
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import EasySelectFormItem from '@/components/EasySelectFormItem.vue'
import { parseDic, $alert, $successInfo } from '@/static/js/utils/index.js'
let initInterVal = null;
const defaultFormA = {
	material:''
}
const defaultFormB = {
	stationCode:''
}
export default {
	name:'toBeOnlinePage',
	components:{DefaultHeaderPageLayout,ActionUserRow,ScanInputFormItem,EasySelectFormItem},
	data(){
		return {
			pageBodyHeight:0,
			step:1,
			containter:null,
			forma:{...defaultFormA},
			formb:{...defaultFormB},
			msg:{
				material:'',
				stationCode:''
			},
			msgType:{
				material:'error',
				stationCode:'error'
			},
			list:[],
			materialDisabled:false,
			stepTwoType:'',
			selectList:{
				stations:[]
			}
		}
	},
	watch:{
		stepTwoType(newVal,oldVal){
			this.triggerStepTwoType()
		}
	},
	methods:{
		/* 物料编码搜索 */
		onSearchMaterial(){
			if (!this.forma.material) {
			  this.msg.material = '请输入物料编号！';
			  return false;
			}
			this.msg.material = ''
			this.getMaterialInfo()
		},
		/* 清除物料编码 */
		onClearMaterial(){
			this.resetMaterial()
		},
		/* 清除产线/工位 */
		onClearStation(){
			this.resetStation()
		},
		/* 删除物料列表某条数据 */
		onDelList(index){
		  this.list.splice(index,1)
		},
		/* 重置物料编码 */
		resetMaterial(){
		  this.msg.material = '';
		  this.forma.material = ''
		},
		/* 重置产线/工位 */
		resetStation(){
		  this.msg.stationCode = '';
		  this.formb.stationCode = ''
		},
		/* 页面重置 */
		reset(){
			this.resetMaterial()
			this.resetStation()
			this.list = []
			this.stepTwoType=''
			this.step = 1
		},
		/* 获取物料信息 */
		getMaterialInfo(callback){
		  let params = {Code:this.forma.material}
		  this.$api.get('ParseCode',params,{block:'online',fullRes:true}).then((d)=>{
		    if (d.data) {
		      let obj = {...d.data}
					obj.materialBatch = obj.batch
					obj.materialCode = this.forma.material
		      this.list.push(obj)
					this.forma.material = ''
		      callback && callback(true)
		    } else {
		      this.msg.material = d.message || '查无信息！';
		      callback && callback(false)
		    }
		  }).catch((err)=>{
		    callback && callback(false)
		  })
		},
		/* 响应重置按钮 */
		onReset(){
			this.reset()
		},
		/* 响应第一步按钮 */
		onNext(){
			this.stepTwoType='select'
			this.step=2
		},
		/* 响应上一步按钮 */
		onPrevStep(){
			this.resetStation()
			this.step=1
		},
		/* 监视第二步显示模式 */
		triggerStepTwoType(){
			if (this.stepTwoType==='select' && this.selectList.stations.length===0) {
				this.$api.get('GetFoamBoardStation',{},{block:'online'}).then((d)=>{
				  this.selectList.stations = d || []
				}).catch((err)=>{})
			}
		},
		onChangeStepTwoType(type){
			this.formb.stationCode=''
			this.stepTwoType=type
		},
		/* 响应提交按钮 */
		onSubmit(){
			if (!this.formb.stationCode) {
			  this.msg.stationCode = '请确认产线！';
			  return false;
			}
			this.msg.stationCode = ''
			
			this.dealConfirm((f)=>{
			  if (f) {
					this.reset()
			    $successInfo('操作成功！');
			  } 
			})
		},
		/* 提交接口调用 */
		dealConfirm(callback){
			let params = {
			  stationCode:this.formb.stationCode,
			  foamBoardInformationList:this.list
			}
			this.$api.post('FoamBoardRecord',params,{block:'online'}).then(()=>{
				callback && callback(true)
			}).catch(()=>{
				callback && callback(false)
			})
		},
		/* 页面初始化获取页面body高度的定时器 */
		startInitInterval(callback){
			initInterVal = setInterval(()=>{
				if (this.pageBodyHeight) {
					this.clearInitInterval()
					callback && callback()
				} else {
					this.pageBodyHeight = this.$refs.page.getBodyHeight()
				}
			},200)
		},
		/* 清除定时器 */
		clearInitInterval(){
			try{
				clearInterval(initInterVal)
				initInterVal = null
			}catch(e){
				//TODO handle the exception
			}
		}
	},
	onReady(){
		this.startInitInterval(()=>{
			/* 页面初始化后需要执行的代码在这边调用 */
		})
	},
	onUnload(){
		this.clearInitInterval()
	}
}
</script>

<style scoped lang="scss">
.bottom-btns-row{
	display: flex;
	padding: 10rpx 0;
	background-color: #fff;
	.btn-frame{
		width: 50%;
		box-sizing: border-box;
	}
	.left-btn-frame{
		padding-left: 20rpx;
		padding-right: 8rpx;
	}
	.right-btn-frame{
		padding-right: 20rpx;
		padding-left: 8rpx;
	}
}
.forma-item{
	margin-bottom: 24rpx;
}
.material-item-group{
	background-color: $uni-bg-color;
	padding-top: 10rpx;
	.material-list-item{
		border-bottom: 2rpx solid $uni-border-color;
		padding-bottom: 10rpx;
		padding-left: 60rpx;
		margin-bottom: 10rpx;
		position: relative;
		&:last-child{
			border-bottom: 0;
		}
		.item-row{
			display: flex;
			&>.label{
				flex-shrink: 0;
				color: $u-tips-color;
				width: 84rpx;
			}
			&>.content{
				flex-grow: 1;
				color: $u-content-color;
				uni-input{
					font: inherit;
					color: $u-primary;
					text-decoration: underline;
				}
			}
		}
		.badge-box{
			position: absolute;
			top:8rpx;
			left: 8rpx;
			z-index: 1;
		}
		.close-btn{
			$closeBtnSize:70rpx;
			width: $closeBtnSize;
			height: $closeBtnSize;
			z-index: 1;
			position: absolute;
			top:0rpx;
			right: 8rpx;
			background-color: $u-error;
			opacity: 0.6;
			border-radius: 25rpx;
			.icon-layer{
				position: absolute;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 2;
			}
		}
	}
}
</style>